<script setup>
import AMap from '@/components/AMap/AMap.vue';
import { computed, ref, watch } from 'vue';

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: String, default: '' }
})
const lnglat = ref('')
// 同步经纬度数据
watch(() => props.modelValue, (val) => {
  lnglat.value = val || '106.709177,26.629907'
}, { immediate: true })
// 显示隐藏
const show = ref(false)
// 记录当前经纬度
const message = computed(() => `当前点位经纬度：${lnglat.value}`)
// 地图加载完成回调函数
const mapInit = (AMap, map, point) => {
  // 加一个标点
  const marker = new AMap.Marker({
    position: new AMap.LngLat(point[0], point[1]),
  });
  map.add(marker);
  // 地图点击切换标点并获取经纬度
  map.on('click', (e) => {
    marker.setPosition(new AMap.LngLat(e.lnglat.lng, e.lnglat.lat))
    lnglat.value = `${e.lnglat.lng},${e.lnglat.lat}`
  })
}
// 确定按钮提交最新经纬度
const ok = () => {
  show.value = false
  emits('update:modelValue', lnglat.value)
}
// 取消按钮恢复点位经纬度
const cancel = () => {
  lnglat.value = props.modelValue || '106.709177,26.629907'
}
// 提示组件的关闭方法
const onClose = () => {
  emits('update:modelValue', '')
}
</script>

<template>
  <div class="com-full">
    <a-modal v-model:open="show" @ok="ok" @cancel="cancel" class="custom-class" root-class-name="root-class-name"
      title="选择点位" placement="right">
      <div class="map-box">
        <AMap :mapInit="mapInit" :lnglat="lnglat" />
      </div>
      <a-alert :message="message" type="info" show-icon style="margin-top: 10px;" />
    </a-modal>
    <AButton type="primary" @click="show = true">选择点位</AButton>
    <a-alert :message="message" type="info" show-icon style="margin-top: 10px;" v-if="props.modelValue" closable
      @close="onClose" />
  </div>
</template>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 500px;
}
</style>